<template>
    <div style="height: 100%;">
        <van-row class="search-row">
            <van-search v-model="formData.pinm" maxlength="20" show-action placeholder="品名" @search="onRefresh">
                <template #action>
                    <div @click="onRefresh">搜索</div>
                </template>
            </van-search>
            <div class="filter-icon">
                <van-icon name="filter-o" @click="$refs.queryPopupRef.show = true" />
            </div>
        </van-row>
        <!-- 办公物资列表 -->
        <van-row class="listCon">
            <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''"
                    @load="onLoad">
                    <van-swipe-cell v-for="val in listData" :key="val.index">
                        <div class="cellContent">
                            <div class="top">
                                <div class="flexTit">
                                    <p class="title">{{ val.PINM }}</p>
                                    <p class="other">
                                        <van-checkbox v-model="val.checked" @change="isChange">
                                            <template #icon="props">
                                                <van-icon v-if="!props.checked" name="plus" color="#1989fa" />
                                            </template>
                                        </van-checkbox>
                                    </p>
                                </div>
                            </div>
                            <div>
                                <p>
                                    <span class="label"> 品名：</span>
                                    {{ val.PINM || "-" }}
                                </p>
                                <p>
                                    <span class="label">物资大类：</span>
                                    {{ val.wzdlName || "-" }}

                                </p>
                                <p>
                                    <span class="label">物资小类：</span>
                                    {{ val.wzxlName || "-" }}
                                </p>

                            </div>
                        </div>
                    </van-swipe-cell>
                </van-list>
                <van-empty v-if="!loading && !listData.length" class="custom-image"
                    :image="require('../../../assets/images/empty.png')" description="暂无数据" />
            </van-pull-refresh>
        </van-row>
        <!-- 筛选条件弹出框 -->
        <queryPopup ref="queryPopupRef" @handleSearch="epidMaterialId" @handleReset="resetForm">
            <van-form class="filterBox">
                <label>物资大类：</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="dlshowPicker = true">
                            <span v-if="!dlcanteenText" style="color: #aaa">请选择大类</span>
                            <span v-else>{{ dlcanteenText }}</span>
                        </div>
                    </template>
                </van-field>
                <label>物资小类：</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="changeXl">
                            <span v-if="!xlcanteenText" style="color: #aaa">请选择小类</span>
                            <span v-else>{{ xlcanteenText }}</span>
                        </div>
                    </template>
                </van-field>
                <label>品名：</label>
                <van-field v-model="formData.pinm" placeholder="品名" />
            </van-form>
        </queryPopup>
        <van-action-sheet v-model="dlshowPicker" cancel-text="取消" :actions="dlList" @select="dlonConfirm" />
        <van-action-sheet v-model="xlshowPicker" cancel-text="取消" :actions="xlList" @select="xlonConfirm" />
        <van-submit-bar :price="leg" :decimal-length="0" label="已选中：" currency="" button-text="确定" @submit="appliance" />
        <full-loading v-if="loading"></full-loading>
    </div>
</template>
<script>
import { getPinm, getwzxl } from "@/api/srvAssurance/assetLabel/assetLabel";
import { queryDic } from '@/api/common';
export default {
    data() {
        return {
            leg: 0, // 选择数量
            removeLsit: [],
            dlcanteenText: '',
            xlcanteenText: '',
            dlshowPicker: false,
            xlshowPicker: false,
            dlList: [],
            xlList: [],
            wzxlList: [],
            formData: {
                pinm: '',
                wzdl: '',
                wzxl: '',
                page: 1,
                rows: 20
            },
            refreshLoading: false,
            loading: false,
            finished: false,
            listData: [], // 列表数据
            selectList: [],
        };
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.iniSelect()
    },
    methods: {
        // 确定筛选
        epidMaterialId() {
            this.$refs.queryPopupRef.show = false;
            this.onRefresh()
        },
        dlonConfirm(item) {
            this.formData.wzdl = item.codeValue;
            this.dlcanteenText = item.valueAlias;
            this.dlshowPicker = false;
        },
        xlonConfirm(item) {
            this.formData.wzxl = item.value;
            this.xlcanteenText = item.name;
            this.xlshowPicker = false;
        },
        //选择小类
        changeXl() {
            if (this.formData.wzdl == null || '' == this.formData.wzdl) {
                this.$Notify({ type: 'warning', message: "请先选择大类！" });
                return
            }
            getwzxl({ leib: this.formData.wzdl }).then(res => {
                this.xlList = res;
                this.xlshowPicker = true;
            })
        },
        translate() {
            this.listData.forEach(item => {
                this.dlList.some(val => {
                    if (val.codeValue === item.WZDL) {
                        this.$set(item, 'wzdlName', val.valueAlias);
                        return true
                    }
                })
                this.wzxlList.some(val => {
                    if (val.codeValue === item.WZXL) {
                        this.$set(item, 'wzxlName', val.valueAlias);
                        return true
                    }
                })
            });
        },
        onRefresh() {
            this.refreshLoading = false;
            this.finished = false;
            this.listData = [];
            this.formData.page = 1;
            this.leg = this.removeLsit.length * 100;
            this.getSearch();
        },
        onLoad() {
            this.formData.page++;
            this.getSearch();
        },
        // 获取表格数据
        getSearch() {
            this.loading = true;
            getPinm(this.formData).then((res) => {
                this.loading = false;
                if (res.data.length > 0) {
                    let arr = res.data;
                    arr.map(item => {
                        this.$set(item, 'checked', false)
                    })
                    this.listData = arr;
                    // this.listData = [...this.listData, ...res.data];
                    this.translate();
                    this.decideLsit();
                    if (this.listData.length >= res.totalCount) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            }).catch(() => {
                this.loading = false;
                this.finished = true;
            });
        },
        // 选中办公物资
        isChange() {
            let arr = [];
            this.listData.map(item => {
                if (item.checked) {
                    arr.push(item)
                }
            })
            this.selectList = arr;
            this.leg = this.selectList.length * 100;
        },
        //对数组去重
        unique(arr) {
            return arr.filter((item, index, arr) => {
                return arr.indexOf(item, 0) === index;
            });
        },
        //已选中办公物资
        appliance() {
            this.$emit('restLsit', []);
            let arr = [];
            var list = this.unique(this.selectList);
            list.forEach(e => {
                let obj = {
                    PINM: e.PINM,
                    WUZDL: e.WZDL,
                    WUZXL: e.WZXL,
                    SHUL: 0,
                    wzdlName: e.wzdlName,
                    wzxlName: e.wzxlName,
                }
                arr.push(obj)
            })
            this.$emit('addList', arr);
            this.isModal();
        },
        //返回上一页
        isModal() {
            this.$emit('goBack');
        },
        // 重置表单
        resetForm() {
            this.formData = {
                pinm: '',
                wzdl: '',
                wzxl: '',
                page: 1,
                rows: 20
            };
            this.dlcanteenText = '';
            this.xlcanteenText = '';
            this.getSearch();
        },
        //判断列表中的数据是否选中
        decideLsit() {
            this.removeLsit.forEach(e => {
                this.listData.forEach(item => {
                    if (item.PINM == e.PINM) {
                        item.checked = true
                    }
                })
            })
        },
        iniSelect() {
            //大类
            queryDic('RA_WORK_FACILITYBIG_CODE').then(res => {
                if (res.code == 1000) {
                    this.dlList = res.data
                }
            })
            //小类
            queryDic('RA_WORK_FACILITYSMALL_CODE').then(res => {
                if (res.code == 1000) {
                    this.wzxlList = res.data
                }
            })
        }
    },
};
</script>

<style scoped lang="less">
.listCon {
    height: calc(100% - 105px);

    .cellContent {
        padding: 10px;

        .flex {
            display: flex;

            p:nth-of-type(1) {
                flex: inherit !important;
                width: 45%;
            }
        }
    }

    .redSpan {
        color: red;
    }
}
</style>
